<template>
	<div>
		<div class="search">
			<input type="text" v-model="keyword" placeholder="输入城市名或拼音" class="search-input"/>
		</div>
		<div class="searchContent" v-show="keyword" ref="search">
			<ul>
				<li class="item" v-for="item of list" :key="item.id" @click="searchCityClick(item.name)">{{item.name}}</li>
				<li class="item" v-show="!hasList">没有找到匹配数据</li>
			</ul>
		</div>
	</div>
	
</template>

<script>
	import BScroll from 'better-scroll'
	export default {
		name: 'citySearch',
		data() {
			return {
				keyword: '',
				list:[]
			};
		},
		computed: {
			hasList() {
				return this.list.length
			}
		},
		props: {
			cities: Object
		},
		watch: {
			keyword () {
				if(!this.keyword){
					this.list = []
					return
				}
				const result = []
				let that = this
				for (let i in this.cities){
					this.cities[i].forEach(function(value){
						if(value.spell.indexOf(that.keyword) > -1 || value.name.indexOf(that.keyword) > -1){
							result.push(value)
						}
					})
				}
				this.list = result
			}
		},
		mounted() {
			this.scroll = new BScroll(this.$refs.search,{})
		},
		methods: {
			searchCityClick (city) {
				this.$store.dispatch('changeCity',city);
				this.$router.push('/')

			}
		},
	}
</script>

<style scoped lang="stylus">
	@import '~styles/varibles.styl'
	.search
	 padding: 0 .1rem
	 height: .72rem
	 background-color:$bgColor
	 .search-input
		 height: .62rem;
		 line-height: .62rem;
		 text-align: center;
		 border-radius: .06rem;
		 width: 100%;
		 color: #666;
		 padding: 0 0.1rem;
		 box-sizing: border-box;
	.searchContent 
	  position:absolute
	  top:1.58rem
	  bottom:0
	  left:0
	  right:0
	  z-index:1
	  background #eee
	  color: #666
	  overflow:hidden
	  .item 
	   line-height:.6rem
	   padding-left:.2rem
</style>
